<html>

<head>
    <meta name="description" content="从零开始使用Vue3.0和Vant制作音乐App (一)1️⃣--Alger的博客">
    <meta name="keywords"
        content="Alger,Alger的博客,Alger's blog,alger,alger的博客,html,css,vue,刘俊杰的博客,刘俊杰,liujunjie,Alger开发,Android,刘先生">

    <meta charset="utf-8" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>从零开始使用Vue3.0和Vant制作音乐App (一)1️⃣ | Alger&#39;s blog</title>

<link rel="shortcut icon" href="http://www.myalger.ml/favicon.ico?v=1602725656399">

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.myalger.ml/styles/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dockerfile.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dart.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<!-- DEMO JS -->
<!--<script src="media/scripts/index.js"></script>-->


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.css">
</head>

<body>
    <div class="main gt-bg-theme-color-first">
        <nav class="navbar navbar-expand-lg">
    <div class="navbar-brand">
        <img class="user-avatar" src="/images/avatar.png" alt="头像">
        <div class="site-name gt-c-content-color-first">
            Alger&#39;s blog
        </div>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars gt-c-content-color-first" style="font-size: 18px"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav mr-auto" style="text-align: center">
            
                <div class="nav-item">
                    
                        <a href="/" class="menu gt-a-link">
                            首页
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/archives" class="menu gt-a-link">
                            归档
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/tags" class="menu gt-a-link">
                            标签
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="http://www.myalger.ml/about" class="menu gt-a-link">
                            关于
                        </a>
                    
                </div>
            
        </div>
        <div style="text-align: center">
            <form id="gridea-search-form" style="position: relative" data-update="1602725656399" action="/search/index.html">
                <input class="search-input" autocomplete="off" spellcheck="false" name="q" placeholder="搜索文章" />
                <i class="fas fa-search gt-c-content-color-first" style="position: absolute; top: 9px; left: 10px;"></i>
            </form>
        </div>
    </div>
</nav>

        <div class="post-container">
            <div class="post-detail gt-bg-theme-color-second">
                <article class="gt-post-content">
                    <h2 class="post-title">
                        从零开始使用Vue3.0和Vant制作音乐App (一)1️⃣
                    </h2>
                    <div class="post-info">
                        <time class="post-time gt-c-content-color-first">
                            · 2020-08-28 ·
                        </time>
                        
                        <a href="http://www.myalger.ml/He-D_m5QM/" class="post-tags">
                            # JavaScript
                        </a>
                        
                        <a href="http://www.myalger.ml/p9SDW22Ljl/" class="post-tags">
                            # Vue.js
                        </a>
                        
                        <a href="http://www.myalger.ml/FoJvIOEID/" class="post-tags">
                            # HTML
                        </a>
                        
                        <a href="http://www.myalger.ml/Io18193yza/" class="post-tags">
                            # CSS
                        </a>
                        
                    </div>
                    <div class="post-content">
                        <p><img src="https://i0.hdslb.com/bfs/album/b7e980f34f1c98b4e3217a5910a68fabab3be881.jpg" alt="" loading="lazy"><br>
模仿网易云制作音乐APP🎧</p>
<!-- more -->
<h2 id="开始之前">开始之前</h2>
<ul>
<li><a href="https://binaryify.github.io/NeteaseCloudMusicApi/#/">网易云API</a> 这个API可以通过<code>node.js</code>实现抓取网易云API</li>
<li><a href="https://youzan.github.io/vant/#/zh-CN/home">vant</a> 一个简单好用的vue组件库</li>
</ul>
<h2 id="项目创建">项目创建</h2>
<pre><code class="language-bash">vue create vue-music-project
</code></pre>
<ul>
<li>
<p>安装<a href="https://router.vuejs.org/zh/">Vue-router</a></p>
<pre><code class="language-bash"> npm install vue-router -s
</code></pre>
<ul>
<li>
<p>在<code>src</code>下创建<code>router</code>文件夹创建<code>index.js</code>     这里主要处理路由的跳转</p>
</li>
<li>
<p>新建时写入如下</p>
</li>
<li>
<pre><code class="language-js">import Vue from 'vue'
import VueRouter from 'vue-router'
//安装router
Vue.use(VueRouter)

//组件
const Home = () =&gt; import ('../views/home/home')

//路由跳转
const routes = [
  {
    path: '',
    redirect: '/home',
  },
  {
    path: '/home',
    component: Home,
    meta: {
      keepAlive: true
    }
  }
]

//路由
const router = new VueRouter({
  routes,
  mode: 'history'
})

//解决有时候路由跳转报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err =&gt; err)
}

//导出路由对象
export default router
</code></pre>
</li>
</ul>
</li>
<li>
<p>安装<a href="https://vuex.vuejs.org/zh/guide/">Vuex</a></p>
<pre><code class="language-bash">npm i vuex -s
</code></pre>
<ul>
<li>
<p>在<code>src</code>下创建<code>store</code>文件夹下创建<code>index.js</code>   这里处理vuex全局效果</p>
</li>
<li>
<p>创建时写入代码如下</p>
</li>
<li>
<pre><code class="language-js">import Vue from 'vue'
import Vuex from 'vuex'

//安装vuex
Vue.use(Vuex)

//要使用的对象
const state = {
  name: '',
}

const store = new Vuex.Store({
  state
})

export default store
</code></pre>
</li>
</ul>
</li>
<li>
<p>安装<a href="http://www.axios-js.com/">axios</a></p>
<pre><code class="language-bash">npm install axios --save
</code></pre>
<ul>
<li>
<p>在<code>src</code>下新建<code>network</code>文件夹下新建<code>request.js</code> 这里主要处理网络请求</p>
</li>
<li>
<p>创建时写入如下代码</p>
</li>
<li>
<pre><code class="language-js">import axios from 'axios'
import baseUrl from &quot;这里放要请求的总路径&quot;;

export function request(config,success, failure){
  const instance = axios.create({
    // baseURL:'https://autumnfish.cn',
    baseURL:baseUrl,
    timeout:5000
  })
  
  // 2. axios的拦截器
  //2.1 请求拦截
  //1. 比如说 config中的一些信息不符合服务器的要求
  //2. 每次发送网络请求时, 都希望在界面中添加一个请求的图标
  //3. 某些网络请求(比如 登录token) 必须携带一些特殊的信息
  instance.interceptors.request.use(config =&gt; {
    return config
  }, err =&gt; {

  });

  // 2.2响应拦截
  instance.interceptors.response.use(res=&gt;{
    //响应拦截必须返回res.data
    return res.data
  },err=&gt;{
    console.log(err);
  });
  
  //返回promise
  return instance(config)
}
</code></pre>
</li>
</ul>
</li>
<li>
<p><code>main.js</code>的配置</p>
<ul>
<li>
<pre><code class="language-js">  import Vue from 'vue'
  import App from './App.vue'
  //路由
  import router from &quot;./router&quot;
  //vuex
  import store from &quot;./store&quot;;
  
  //使用vant
  import Vant from 'vant';
  import 'vant/lib/index.css';
  Vue.use(Vant);
  
  
  //将vuex的store添加到Vue的原型中 , 即所有组件中
  Vue.prototype.$store = store;
  
  
  import axios from 'axios'
  axios.defaults.withCredentials = true
  Vue.prototype.$axios = axios
  
  
  new Vue({
    render: h =&gt; h(App),
    router
  }).$mount('#app')
  
</code></pre>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>下一期开始编写🚗</p>
</blockquote>

                    </div>
                </article>
            </div>

            
            <div class="next-post">
                <div class="next gt-c-content-color-first">下一篇</div>
                <a href="http://www.myalger.ml/M_ZBIBU/" class="post-title gt-a-link">
                    正则表达式学习🏓
                </a>
            </div>
            

            
            <span id="/s_xra075M/" class="leancloud_visitors" data-flag-title="从零开始使用Vue3.0和Vant制作音乐App (一)1️⃣">
                <em class="post-meta-item-text">阅读量 </em>
                <i class="leancloud-visitors-count">0</i>
            </span>
            

            

            
            <script src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>

<style>
	div#vcomments{
		width:100%;
		max-width: 1000px;
		padding: 2.5%
	}
</style>


	<div id="vcomments"></div>

<script>
	new Valine({
		el: '#vcomments',
		appId: 'zSod8O6f9ppLFYxB5PgGNotJ-gzGzoHsz',
		appKey: 'zPFYmL2RAeARE6sTWFnHfJg7',
		avatar: 'retro',
		pageSize: 10,
		recordIp: true,
		placeholder: 'Just Go Go',
		visitor: true,
	});
</script>

            

            <div class="site-footer gt-c-content-color-first">
    <div class="slogan gt-c-content-color-first">春风得意马蹄疾,一日看尽长安花.
</div>
    <div class="social-container">
        
            
        
            
        
            
        
            
        
            
        
            
        
    </div>
    <div class="footer-info">
        Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a>
    </div>
    <div>
        Theme by <a href="https://imhanjie.com/" target="_blank">imhanjie</a>, Powered by <a
                href="https://github.com/getgridea/gridea" target="_blank">Gridea | <a href="http://www.myalger.ml/atom.xml" target="_blank">RSS</a></a>
    </div>
</div>

<script>
  hljs.initHighlightingOnLoad()
</script>

        </div>
    </div>
</body>

</html>